import React, { Component } from 'react';

class Modal extends Component {
  render () {
    return (
      <div style={{ 
        position: 'fixed',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'

       }}>
        <div style={{ 
          width: '50%',
          minHeight: 500,
          backgroundColor: '#fff'
         }}>
          <header>
            { this.props.header }
            <span
              style={{ float: 'right'}}
              onClick={ () => this.props.onClose() }
            >×</span>
          </header>
          <div>
            { this.props.content }
          </div>
        </div>
      </div>
    )
  }
}

class App extends Component {
  state = {
    show: false
  }
  render() {
    return (
      <div>
        <button onClick={ () => this.setState({ show: true })}>打开模态框</button>
        {
          this.state.show ? <Modal
            header = "模态框标题"
            content = "这里是一个自定义的模态框"
            onClose = { () => this.setState({ show: false })}/> : null
        }
      </div>
    );
  }
}

export default App;